<template>
  <div class="detail-page">
    <div class="page-header">
      <div class="title-box">
        <el-button class="back-button" icon="el-icon-back" @click="goback">返回</el-button>
        <div class="page-title">党员信息详情</div>
      </div>
      <div>
        <el-button type="primary" class="back-button" @click="detailToEdit">编辑</el-button>
      </div>
    </div>
    <div class="page-body">
      <div class="titleStyle">
        <span>基础信息</span>
      </div>
      <div class="organization-image-box">
        <img class="organization-image" src="" />
      </div>
      <el-descriptions direction="vertical" :column="2">
        <el-descriptions-item :span="2" label="姓名">{{ form.name }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="性别">{{ genderList[form.gender] }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="联系方式">{{ form.contact }}</el-descriptions-item>
        <el-descriptions-item :span="2" label="出生日期">{{ form.birthDate }}</el-descriptions-item>
        <el-descriptions-item label="籍贯">{{ form.origin }}</el-descriptions-item>
        <el-descriptions-item label="民族">{{ form.ethnicGroup }}</el-descriptions-item>
        <el-descriptions-item label="户籍所在地">{{ form.placeHouseholdRegistration }}</el-descriptions-item>
        <el-descriptions-item label="家庭住址">{{ form.homeAddress }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ form.identificationNumber }}</el-descriptions-item>
        <el-descriptions-item label="工作职业">{{ workList[form.occupationWork] }}</el-descriptions-item>
        <el-descriptions-item label="现工作单位">{{ form.currentWorkUnit }}</el-descriptions-item>
      </el-descriptions>
      <div class="titleStyle">
        <span>党籍信息</span>
      </div>
      <el-descriptions direction="vertical" :column="2">
        <el-descriptions-item label="入党单位">{{ form.joinPartyUnit }}</el-descriptions-item>
        <el-descriptions-item label="入党时所在支部">{{ form.branchJoinedParty }}</el-descriptions-item>
        <el-descriptions-item label="入党时间">{{ form.joinPartyTime }}</el-descriptions-item>
        <el-descriptions-item label="转正时间">{{ form.conversionTime }}</el-descriptions-item>
        <el-descriptions-item label="党龄">{{ form.partAge }}</el-descriptions-item>
        <el-descriptions-item label="党员身份">{{ partyMemberList[form.partyMember] }}</el-descriptions-item>
      </el-descriptions>
      <div class="titleStyle">
        <span>组织信息</span>
      </div>
      <el-descriptions direction="vertical" :column="2">
        <el-descriptions-item label="所在支部">{{ form.branchName }}</el-descriptions-item>
        <el-descriptions-item label="党内职务">{{ form.partyPositionsName }}</el-descriptions-item>
        <el-descriptions-item label="职位级别">{{ form.positionLevelName }}</el-descriptions-item>
        <el-descriptions-item label="流入时间">{{ form.inflowTime }}</el-descriptions-item>
      </el-descriptions>
      <div class="titleStyle">
        <span>人物履历</span>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column align="center" label="履历日期" />
        <el-table-column prop="characterBiog" align="center" label="人物履历" />
      </el-table>
      <div class="titleStyle">
        <span>党内荣誉</span>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column prop="gainTime" align="center" label="获得日期" />
        <el-table-column prop="honors" align="center" label="获得荣誉" />
      </el-table>
      <div class="titleStyle">
        <span>党内处罚</span>
      </div>
      <el-table
        :data="tableData"
      >
        <el-table-column prop="punishmentTime" align="center" label="处罚日期" />
        <el-table-column prop="punishmentContent" align="center" label="处罚内容" />
      </el-table>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      form: {},
      tableData: [],
      workList: ['党的机关、国家机关、群众团体和社会组织、企事业单位负责人', '专业技术人员', '办事人员和有关人员', '社会生产服务和生活服务人员', '农、林、牧、渔业生产及辅助人员', '生产制造及有关人员', '军人', '学生', '不便分类的其他从业人员', '退休'],
      partyMemberList: ['正式党员', '组织关系转出', '失联', '清退', '死亡', '开除党籍'],
      genderList: ['男', '女']
    }
  },
  methods: {
    init (row) {
      this.form = { ...row }
    },
    goback () {
      this.$emit('goback')
    },
    detailToEdit () {
      this.$emit('detailToEdit', this.form)
    }
  }
}
</script>
<style scoped lang="scss">
  .page-header {
    display: flex;
    height: 60px;
    align-items: center;
    border-bottom: 1px solid #ddd;
    justify-content: space-between;
    .title-box {
      display: flex;
      height: 60px;
      align-items: center;
    }
    .back-button {
      margin-right: 16px;
    }
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .page-body {
    height: calc(100vh - 130px);
    overflow-y: auto;
    position: relative;
    .organization-image-box {
      width: 240px;
      height: 180px;
      border: 1px solid #000;
      position: absolute;
      left: 50%;
      .organization-image {
        width: 100%;
        height: 100%;
      }
    }
    .titleStyle {
      font-weight: 600;
      height: 35px;
      line-height: 35px;
      padding-left: 10px;
      padding-right: 10px;
      margin-bottom: 8px;
      background-color: #d8eff9;
      display: flex;
      justify-content: space-between;
    }
  }
</style>
